<template>
    <div class="bg-white rounded-xl p-5 shadow-sm">
        <h3 class="text-lg font-semibold mb-4">案件统计</h3>

        <div class="space-y-5">
            <div v-for="(stat, index) in statistics" :key="index">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">{{ stat.label }}</span>
                    <span class="text-sm font-medium">{{ stat.value }}</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-value" :class="stat.colorClass" :style="{ width: stat.percentage }"></div>
                </div>
            </div>
        </div>

        <button
            class="w-full mt-5 py-2 text-primary text-sm border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors">
            查看详细统计
        </button>
    </div>
</template>

<script setup lang="ts">
interface Statistic {
    label: string
    value: number
    percentage: string
    colorClass: string
}

const statistics: Statistic[] = [
    {
        label: '待处理案件',
        value: 12,
        percentage: '25%',
        colorClass: 'bg-danger'
    },
    {
        label: '处理中案件',
        value: 28,
        percentage: '60%',
        colorClass: 'bg-warning'
    },
    {
        label: '已解决案件',
        value: 156,
        percentage: '85%',
        colorClass: 'bg-success'
    },
    {
        label: '本月新增案件',
        value: 42,
        percentage: '55%',
        colorClass: 'bg-primary'
    }
]
</script>

<style scoped>
.progress-bar {
    @apply h-2 rounded-full bg-neutral-light overflow-hidden;
}

.progress-value {
    @apply h-full transition-all duration-500 ease-out;
}
</style>
